<template>
  <div id="userManager">
    <div class="aspace">
      <a-space :size="20">
        <a-input
          :style="{ width: '320px' }"
          @keyup.enter="list(formData)"
          placeholder="标题"
          v-model="formData.title"
          allow-clear
        />
        <a-input
          :style="{ width: '320px' }"
          @keyup.enter="list(formData)"
          placeholder="描述"
          v-model="formData.description"
          allow-clear
        />
        <a-button type="primary" @click="list(formData)">查询</a-button>
        <a-button @click="handleReset">重置</a-button>
      </a-space>
    </div>
    <div class="atable">
      <a-card>
        <div style="margin-bottom: 10px">
          <a-button type="primary" @click="handleAdd">新建</a-button>
          <a-modal v-model:visible="visible" :footer="false">
            <QuestionBankModal
              :title="title"
              :closeModal="closeModal"
            ></QuestionBankModal>
            <template #title>
              {{ title }}
            </template>
          </a-modal>
        </div>
        <a-table
          :columns="columns"
          :data="data"
          :pagination="{ total }"
          @page-change="handlePageChange"
        >
          <template #tagslot="{ record }">
            <a-tag
              v-for="e in record.tags"
              :key="e"
              color="arcoblue"
              style="margin: 2px"
              >{{ e }}
            </a-tag>
          </template>
          <template #picslot="{ record }">
            <img :src="record.picture" width="50px" />
          </template>
          <template #optional="{ record }">
            <a
              href="javascript:void(0);"
              style="color: blue"
              @click="handleEdit"
              >修改{{ record.accountName }}</a
            >&nbsp;
            <a-popconfirm
              content="确认删除？"
              type="info"
              @ok="handleDel(record)"
            >
              <a href="javascript:void(0);" style="color: red"
                >删除{{ record.accountName }}</a
              >
            </a-popconfirm>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from "vue";
import { QuestionBankControllerService } from "../../../generated";
import notification from "@arco-design/web-vue/es/notification";
import QuestionBankModal from "@/views/questionBank/QuestionBankModal.vue";

let formData = reactive({
  current: 1,
  title: "",
  description: "",
});

const total = ref(10);
const columns = [
  {
    title: "标题",
    align: "center",
    dataIndex: "title",
  },
  {
    title: "描述",
    align: "center",
    dataIndex: "description",
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "图片",
    align: "center",
    dataIndex: "picture",
    slotName: "picslot",
  },
  {
    title: "创建时间",
    align: "center",
    dataIndex: "createTime",
  },
  {
    title: "操作",
    align: "center",
    slotName: "optional",
  },
];
const data = reactive([]);
const visible = ref(false);
const title = ref("");

function list(args: any) {
  QuestionBankControllerService.listQuestionBankByPageUsingPost({
    ...args,
  }).then((res) => {
    data.length = 0;
    total.value = res.data.total;
    Object.assign(data, res.data.records);
  });
}

function handlePageChange(page: number) {
  formData.current = page;
  list(formData);
}

function clearContent() {
  Object.assign(formData, {
    current: 1,
    title: "",
    description: "",
  });
}

function handleReset() {
  clearContent();
  list(formData);
}

function handleAdd() {
  title.value = "新建题库";
  visible.value = true;
}

function handleEdit() {
  title.value = "编辑题库";
  visible.value = true;
}

function handleDel(record) {
  QuestionBankControllerService.deleteQuestionBankUsingPost({
    id: record.id,
  }).then((res) => {
    if (res.code === 0) {
      notification.success("删除成功");
      clearContent();
      list(formData);
    } else {
      notification.error("删除失败");
    }
  });
}

/**
 * 关闭弹窗
 */
function closeModal() {
  visible.value = false;
}

onMounted(() => {
  list(formData);
});
</script>

<style scoped>
#userManager {
  margin-left: 200px;
  margin-right: 200px;
}

.atable {
  margin-top: 20px;
}

a {
  text-decoration: none;
}
</style>
